<template>
	<view class="play">
		<song-top :title="title"></song-top>
		<view class="center">
			<!-- 图片页面 -->
			<view class="card" v-show="show" @click="change">
				<span class="border b1"></span>
				<span class="border b2"></span>
				<image :class="isPlay?'':'ro'" :src="picUrl" mode="" ></image>
			</view>
			<!-- 歌词页面 -->
			<scroll-view class="word" v-show="!show" scroll-y="true" @click="change" :scroll-top="topPosition">
				<li v-for="(item, index) in words" :key="item[0]" :class="index==currentIndexLi ? 'colo':''" >{{item[1]}}</li>
			</scroll-view>
		</view>
		<play-song :songUrl="songUrl" @pre="pre" @next="next" @pause="pause" @audioTime="audioTime"></play-song>
	</view>
</template>
 
<script>
	import SongTop from "./SongTop"
	import PlaySong from "./PlaySong"
	
	import {getSong} from "@/network/axios/play/getSong"
	import {getWords} from "@/network/axios/play/getWords"
	
	import {parseLyric} from "@/utils/parseWords"
	
	export default {
		name: '',
		data(){
			return {
				id: "",
				songUrl: "",
				picUrl: "",
				title: "", 
				songList: [],  //歌单列表
				currentIndex: 0, //当前播放歌曲索引
				isPlay: true,
				show: true,
				words: [],
				timeLi: [], //存储播放时间的数组
				audioCurrentTime: 0, //当前播放时间
				currentIndexLi: 0, //当前活跃歌词
				topPosition: 0 //滚动条位置
			}
		},
		methods:{
			//更新歌曲、图片
			updata() {
				let songInfo = this.songList[this.currentIndex]
				this.id = songInfo.id
				getSong(this.id).then((res) => {
					this.songUrl = res.data.data[0].url
				})
				this.picUrl = songInfo.al.picUrl
				this.title = songInfo.name
			},
			pre() {
				//改变索引
				if(this.currentIndex == 0) {
					this.currentIndex = this.songList.length-1
				} else {
					this.currentIndex--
				}
				//跟新数据
				this.updata()
			},
			next() {
				if(this.currentIndex == this.songList.length-1) {
					this.currentIndex = 0
				} else {
					this.currentIndex++
				}
				this.updata()
			},
			pause(judge) {
				this.isPlay = judge
			},
			//歌词/封面切换
			change() {
				this.show = !this.show
			},
			//拿到实时播放时间
			audioTime(time) {
				this.audioCurrentTime = time
			}
		},
		watch: {
			//改变活跃行索引
			audioCurrentTime(val) {
				for(let i = 0; i < this.words.length-1; i++) {
					if(this.words[i][1] && val > this.words[i][0] && val < this.words[i+1][0]) {
						this.currentIndexLi = i	
						if(i >= 5 && i <= this.words.length-5) this.topPosition += 1.8
					}
				}	
			}
		},
		onLoad(option) {			
			//拿到id
			this.id = option.id
			this.id *= 1
			//得到歌曲url
			getSong(this.id).then(res => {
				this.songUrl = res.data.data[0].url
			})
			//得到歌词
			getWords(this.id).then(res => {
				this.words = res.data.lrc.lyric
				this.words = parseLyric(this.words)		
			})
			
			//失败1
			//得到封面url
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on("acceptDataFromOpenerPage", (data) => {
			// 	console.log(data)
			// })
			
			//失败2
			// uni.$on("songPic", (data) => {
			// 	this.picUrl = data.picUrl
			// 	console.log(this.picUrl)
			// })
			// console.log(this.picUrl)
			 
			//事件总线 失败3
			// this.$bus.$on("songPic",(res) => {
			// 	this.picUrl = res.picUrl
			// 	this.title = res.title
			// 	console.log("歌名"+this.title)
			// })
			
			//通过vuex得到封面url和题目、歌单和当前播放索引
			this.picUrl = this.$store.state.songInfo.picUrl
			this.title = this.$store.state.songInfo.title
			this.currentIndex = this.$store.state.songInfo.currentIndex
			this.songList = this.$store.state.songInfo.songList
		},
		components: {
			SongTop,
			PlaySong
		}
	}
</script>
 
<style lang="less" scoped>
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100px;
		.card {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		image {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			animation: ro 20s linear infinite forwards;
		}
		.border {
			position: absolute;
			border: 1px solid #b2bec3;
			border-radius: 50%;
			width: 200px;
			height: 200px;
		}
		.b1 {
			animation: bo 5s linear infinite;
		}
		.b2 {
			animation: bo 5s linear 2s infinite;
		}
		.ro {
			animation-play-state: paused;
		}
	}
	.word {
		margin-top: 40px;
		text-align: center;
		height: 250px;
		li {
			margin-bottom: 5px;
		}
	}
	.colo {
		color: #d63031;
	}
	
	
	@keyframes ro {
		100% {
			transform: rotate(360deg)
		}
	} 
	@keyframes bo {
		100% {
			width: 250px;
			height: 250px;
			opacity: 0;
		}
	}
</style>
